﻿<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${ctx}/common/plugins/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${ctx}/common/plugins/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="${ctx}/common/common.css" media="all">
    <script src="${ctx}/common/plugins/jquery-1.10.2.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <script src="${ctx}/common/plugins/layuiadmin/layui/layui.js"></script>
    <style type="text/css">
        .rowtop {
            padding: 10px;
        }


        .file-preview {
            display:inline-block;
        }

        .file-item {
            position: relative;
            width: 100px;
            height: 120px;
            border: 1px solid #d9d9d9;
            border-radius: 4px;
            padding: 5px;
            text-align: center;
            background: #f8f8f8;
        }

        .file-icon {
            font-size: 40px;
            height: 70px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .file-icon.img {
            color: #e74c3c;
        }

        .file-icon.excel {
            color: #27ae60;
        }

        .file-icon.pdf {
            color: #e67e22;
        }

        .file-icon.word {
            color: #3498db;
        }

        .file-icon.other {
            color: #7f8c8d;
        }

        .file-name {
            font-size: 12px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-top: 5px;
        }

        .file-remove {
            position: absolute;
            top: -8px;
            right: -8px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #ff5722;
            color: white;
            text-align: center;
            line-height: 20px;
            cursor: pointer;
            font-size: 12px;
            display: none;
        }

        .file-item:hover .file-remove {
            display: block;
        }

        .upload-status {
            margin-top: 10px;
            font-size: 13px;
            color: #666;
        }

        .upload-btn-group {
            margin-top: 15px;
        }

        .supported-types {
            margin-top: 10px;
            font-size: 13px;
            color: #666;
        }

        .file-preview-img {
            max-width: 100px;
            max-height: 70px;
            object-fit: contain;
        }
    </style>
</head>
<body>
<form class="layui-form layui-container" action="${ctx}/enterprise/${action}" method="post"
      enctype="multipart/form-data" style="background-color: white;">
    <input type="hidden" name="id" value="${entity.id}"/>
    <input type="hidden" name="companyId" value="${companyId}"/>
    <div class="layui-row rowtop" style="margin-top: 20px;">
        <div class="layui-row rowtop">
            <div class="layui-col-md5">
                <label class="layui-form-label">姓名<span style="color: red">*</span></label>
                <div class="layui-input-block">
                    <input type="text" name="name" required value="${entity.name}" lay-verify="required"
                           placeholder="请输入姓名" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-col-md5">
                <label class="layui-form-label">证件类型<span style="color: red">*</span></label>
                <div class="layui-input-block">
                    <select name="cardTypeCode" lay-verify="required"  ${!empty detail?"disabled":"" }>
                        <option value="">请选择证件类型</option>
                        <c:forEach items="${cardType}" var="item">
                            <option value="${item.id}" ${entity.cardTypeCode==item.code ? "selected":""}>${item.described}</option>
                        </c:forEach>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-row rowtop">
            <div class="layui-col-md5">
                <label class="layui-form-label">性别<span style="color: red">*</span></label>
                <div class="layui-input-block">
                    <input type="radio" ${!empty detail?"disabled":"" } ${empty entity.gender?"checked":"" }
                           name="gender" ${entity.gender eq '男'?'checked':''} value="男" title="男">
                    <input type="radio" ${!empty detail?"disabled":"" }
                           name="gender" ${entity.gender eq '女'?'checked':''}
                           value="女"
                           title="女">
                </div>
            </div>
            <div class="layui-col-md5">
                <label class="layui-form-label">证件号码/代表证编号<span style="color: red">*</span></label>
                <div class="layui-input-block">
                    <input type="text" name="identityCard" required value="${entity.identityCard}" lay-verify="required"
                           placeholder="请输入证件号码/代表证编号" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-row rowtop">
            <div class="layui-col-md5">
                <label class="layui-form-label">出生日期<span style="color: red">*</span></label>
                <div class="layui-input-block">
                    <input type="text" name="birthday" id="first_date"
                           value="${entity.birthday}"
                           placeholder="请选择出生日期" lay-verify="required" autocomplete="off"
                           class="layui-input">
                    <%--                    <input type="text" name="birthday" required value="${entity.birthday}" lay-verify="required"--%>
                    <%--                           placeholder="请输入出生日期" autocomplete="off" class="layui-input">--%>
                </div>
            </div>
            <div class="layui-col-md5">
                <label class="layui-form-label">职务<span style="color: red">*</span></label>
                <div class="layui-input-block">
                    <select name="postCode" lay-verify="required" ${!empty detail?"disabled":"" }>
                        <option value="">请选择职务</option>
                        <c:forEach items="${job}" var="e">
                            <option value="${e.id }" ${entity.postCode eq e.id ? "selected":""}>${e.described}</option>
                        </c:forEach>
                    </select>
                </div>
            </div>

        </div>
        <div class="layui-row rowtop">
            <div class="layui-col-md5">
                <label class="layui-form-label">联系电话<span style="color: red">*</span></label>
                <div class="layui-input-block">
                    <input type="text" name="phone" required value="${entity.phone}" lay-verify="required"
                           placeholder="请输入联系电话" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-col-md5">
                <label class="layui-form-label">职称<span style="color: red">*</span></label>
                <div class="layui-input-block">
                    <%--                    <input type="text" name="jobTitle" required value="${entity.jobTitle}" lay-verify="required"--%>
                    <%--                           placeholder="请输入职称" autocomplete="off" class="layui-input">--%>
                    <select name="jobTitleCode"   ${!empty detail?"disabled":"" }>
                        <option value="">请选择职称</option>
                        <c:forEach items="${titles}" var="e">
                            <option value="${e.id }" ${entity.jobTitleCode eq e.code ? "selected":""}>${e.described}</option>
                        </c:forEach>
                    </select>
                </div>
            </div>
        </div>

        <div class="layui-row rowtop">
            <div class="layui-col-md5">
                <label class="layui-form-label">电子邮箱<span style="color: red">*</span></label>
                <div class="layui-input-block">
                    <input type="text" name="email" lay-verify="required" value="${entity.email}"
                           placeholder="请输入电子邮箱" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-col-md5">
                <label class="layui-form-label">住址<span style="color: red">*</span></label>
                <div class="layui-input-block">
                    <input type="text" name="address" required value="${entity.address}" lay-verify="required"
                           placeholder="请输入住址" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-row rowtop">
            <div class="layui-col-md5">
                <label class="layui-form-label">任职起始日期<span style="color: red">*</span></label>
                <div class="layui-input-block">
                    <input type="text" name="postStartDate" id="post_start_Date"
                           value="${entity.postStartDate}"
                           placeholder="请选择任职起始日期" lay-verify="required" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-col-md5">
                <label class="layui-form-label">任职截止日期<span style="color: red">*</span></label>
                <div class="layui-input-block">
                    <input type="text" name="postEndDate" id="post_end_Date"
                           value="${entity.postEndDate}"
                           placeholder="任职截止日期" lay-verify="required" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-row rowtop">
            <div class="layui-col-md5">
                <label class="layui-form-label">文化程度与专业<span style="color: red">*</span></label>
                <div class="layui-input-block">
                    <%--                    <input type="text" name="educationBackground" lay-verify="required"--%>
                    <%--                           value="${entity.educationBackground}" placeholder="请输入文化程度与专业" autocomplete="off"--%>
                    <%--                           class="layui-input">--%>

                    <select name="backgroundCode"  ${!empty detail?"disabled":"" }>
                        <option value="">请选择文化程度</option>
                        <c:forEach items="${education}" var="e">
                            <option value="${e.id }" ${entity.backgroundCode eq e.code ? "selected":""}>${e.described}</option>
                        </c:forEach>
                    </select>
                </div>
            </div>

            <div class="layui-col-md5">
                <label class="layui-form-label">从事相关行业时间<span style="color: red">*</span></label>
                <div class="layui-input-block">
                    <input type="text" name="workYears" id="work_years"
                           value="${entity.workYears}"
                           placeholder="请选择从事相关行业时间" lay-verify="required" autocomplete="off"
                           class="layui-input">
                </div>
            </div>

        </div>
        <div class="layui-row rowtop">
            <div class="layui-col-md5">
                <label class="layui-form-label">职业资格证<span style="color: red">*</span></label>
                <div class="layui-input-block" id="certificateImg">

                    <button type="button" class="layui-btn" id="certificateUpload">
                        <i class="layui-icon">&#xe67c;</i>上传图片
                    </button>
                    <input type="hidden" value="${entity.certificate}" id="certificateUrl"/>
                    <input type="file" name="certificateFile" id="certificateFile" style="display: none;"
                           accept="image/*">
                    <c:if test="${!empty entity.certificate && fn:length(entity.certificate)>0  && entity.certificate != 'null' }">
                        <img src="${ctx}${entity.certificate}" class="certificateImg"
                             style="width: 100px;height: 100px;">
                    </c:if>
                </div>
            </div>

            <div class="layui-col-md5">
                <%--                <label class="layui-form-label">任命文件<span style="color: red">*</span></label>--%>
                <%--                <div class="layui-input-block">--%>
                <%--                    <input type="text" name="appointmentDocument" lay-verify="required"--%>
                <%--                           value="${entity.appointmentDocument}" placeholder="请输入任命文件" autocomplete="off"--%>
                <%--                           class="layui-input">--%>
                <%--                </div>--%>

                    <label class="layui-form-label">任命文件<span style="color: red">*</span></label>
                    <div class="layui-input-block">
                        <input type="file" name="file" id="fileInput" style="display: none;"
                                accept=".jpg,.jpeg,.png,.gif,.pdf,.doc,.docx,.xls,.xlsx">
                        <button type="button" class="layui-btn" id="uploadBtn">
                            <i class="layui-icon">&#xe67c;</i>选择文件
                        </button>
                        <div class="file-preview" id="filePreview">
                            <c:if test="${!empty entity.appointmentDocument && fn:length(entity.appointmentDocument)>0 && entity.appointmentDocument != 'null'}">
                                <div class="file-item">
                                    <div class="file-remove" onclick="removeUploadedFile()"><i
                                            class="layui-icon">&#x1006;</i></div>

                                    <div class="file-icon">
                                        <c:choose>
                                            <c:when test="${!empty fileInfo && fileInfo.exists == true && fileInfo.fileType == 'image'}">
                                                <img src="${ctx}/files/${fileInfo.serverFileName}"
                                                     class="file-preview-img"
                                                     onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
                                                <div style="display:none; color: #999; font-size: 12px;">图片加载失败
                                                </div>
                                            </c:when>
                                            <c:when test="${!empty fileInfo && fileInfo.exists == true && fileInfo.fileType == 'excel'}">
                                                <i class="fas fa-file-excel excel"></i>
                                            </c:when>
                                            <c:when test="${!empty fileInfo && fileInfo.exists == true && fileInfo.fileType == 'pdf'}">
                                                <div class="file-icon pdf">
                                                    <i class="fas fa-file-pdf "></i>
                                                </div>
                                            </c:when>
                                            <c:when test="${!empty fileInfo && fileInfo.exists == true && fileInfo.fileType == 'word'}">
                                                <i class="fas fa-file-word word"></i>
                                            </c:when>
                                            <c:when test="${!empty fileInfo && fileInfo.exists == true && fileInfo.fileType == 'text'}">
                                                <i class="fas fa-file-alt text"></i>
                                            </c:when>
                                            <c:when test="${!empty fileInfo && fileInfo.exists == true}">
                                                <i class="fas fa-file other"></i>
                                            </c:when>
                                            <c:when test="${!empty fileInfo && fileInfo.exists == false}">
                                                <i class="fas fa-exclamation-triangle" style="color: #ff5722;"></i>
                                            </c:when>
                                            <c:otherwise>
                                                <c:choose>
                                                    <c:when test="${fn:endsWith(entity.appointmentDocument, '.jpg') || fn:endsWith(entity.appointmentDocument, '.png') || fn:endsWith(entity.appointmentDocument, '.gif')}">
                                                        <img src="${ctx}/files/${fileInfo.serverFileName}"
                                                             class="file-preview-img"
                                                             onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
                                                        <div style="display:none; color: #999; font-size: 12px;">
                                                            图片加载失败
                                                        </div>
                                                    </c:when>
                                                    <c:when test="${fn:endsWith(entity.appointmentDocument, '.xls') || fn:endsWith(entity.appointmentDocument, '.xlsx')}">
                                                        <i class="fas fa-file-excel excel"></i>
                                                    </c:when>
                                                    <c:when test="${fn:endsWith(entity.appointmentDocument, '.pdf')}">
                                                        <div class="file-icon pdf">
                                                            <i class="fas fa-file-pdf "></i>
                                                        </div>
                                                    </c:when>
                                                    <c:when test="${fn:endsWith(entity.appointmentDocument, '.doc') || fn:endsWith(entity.appointmentDocument, '.docx')}">
                                                        <i class="fas fa-file-word word"></i>
                                                    </c:when>
                                                    <c:otherwise>
                                                        <i class="fas fa-file other"></i>
                                                    </c:otherwise>
                                                </c:choose>
                                            </c:otherwise>
                                        </c:choose>
                                    </div>
                                    <div class="file-name"
                                         title="${!empty fileInfo ? fileInfo.fileName : '已上传文件'}">
                                        <c:choose>
                                            <c:when test="${!empty fileInfo && fileInfo.exists == true && fileInfo.fileName != null}">
                                                ${fileInfo.fileName}
                                            </c:when>
                                            <c:when test="${!empty fileInfo && fileInfo.exists == false}">
                                                <span style="color: #ff5722;">${fileInfo.fileName}</span>
                                            </c:when>
                                            <c:otherwise>
                                                已上传文件
                                            </c:otherwise>
                                        </c:choose>
                                    </div>
                                    <c:if test="${!empty fileInfo && fileInfo.exists == true && fileInfo.fileSize != null}">
                                        <div class="file-size" style="font-size: 10px; color: #999; margin-top: 2px;">
                                            <c:choose>
                                                <c:when test="${fileInfo.fileSize > 1048576}">
                                                    <fmt:formatNumber value="${fileInfo.fileSize / 1048576.0}"
                                                                      maxFractionDigits="1"/>MB
                                                </c:when>
                                                <c:when test="${fileInfo.fileSize > 1024}">
                                                    <fmt:formatNumber value="${fileInfo.fileSize / 1024.0}"
                                                                      maxFractionDigits="1"/>KB
                                                </c:when>
                                                <c:otherwise>
                                                    ${fileInfo.fileSize}B
                                                </c:otherwise>
                                            </c:choose>
                                        </div>
                                    </c:if>
                                </div>
                            </c:if>
                        </div>
                    </div>
            </div>

        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" id="formBtn" lay-submit lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                <button type="button" id="rollback" class="layui-btn layui-btn-primary">返回</button>
            </div>
        </div>
    </div>

</form>

<script>

    layui.use(['form', 'laydate', 'upload', 'layer'], function () {
        var form = layui.form;
        var laydate = layui.laydate;
        var upload = layui.upload;
        var layer = layui.layer;
        var $ = layui.$;
        //执行一个laydate实例
        laydate.render({
            elem: '#first_date' //指定元素
            , type: 'date'
        });
        laydate.render({
            elem: '#post_start_Date' //指定元素
            , type: 'date'
        });
        laydate.render({
            elem: '#post_end_Date' //指定元素
            , type: 'date'
        });
        laydate.render({
            elem: '#work_years' //指定元素
            , type: 'date'
        });
        // 文件选择按钮点击事件
        $('#uploadBtn').click(function () {
            $('#fileInput').click();
        });

        // 文件选择事件
        $('#fileInput').change(function () {
            var file = this.files[0];
            if (file) {
                // 显示文件预览
                $("#filePreview").html('');
                var fileIcon = 'other';
                var iconClass = 'fas fa-file';

                if (file.type.indexOf('image') !== -1) {
                    // 如果是图片，显示图片预览
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        $("#filePreview").append('<div class="file-item">' +
                            '<div class="file-remove" onclick="clearFile()"><i class="layui-icon">&#x1006;</i></div>' +
                            '<div class="file-icon"><img src="' + e.target.result + '" class="file-preview-img"></div>' +
                            '<div class="file-name" title="' + file.name + '">' + file.name + '</div>' +
                            '</div>');
                    };
                    reader.readAsDataURL(file);
                } else {
                    // 根据文件类型显示对应图标
                    if (file.name.endsWith('.xls') || file.name.endsWith('.xlsx') || file.type.indexOf('spreadsheet') !== -1) {
                        fileIcon = 'excel';
                        iconClass = 'fas fa-file-excel';
                    } else if (file.name.endsWith('.pdf') || file.type.indexOf('pdf') !== -1) {
                        fileIcon = 'pdf';
                        iconClass = 'fas fa-file-pdf';
                    } else if (file.name.endsWith('.doc') || file.name.endsWith('.docx') || file.type.indexOf('word') !== -1) {
                        fileIcon = 'word';
                        iconClass = 'fas fa-file-word';
                    }

                    $("#filePreview").append('<div class="file-item">' +
                        '<div class="file-remove" onclick="clearFile()"><i class="layui-icon">&#x1006;</i></div>' +
                        '<div class="file-icon ' + fileIcon + '"><i class="' + iconClass + '"></i></div>' +
                        '<div class="file-name" title="' + file.name + '">' + file.name + '</div>' +
                        '</div>');
                }
            }
        });

        // 监听表单提交
        form.on('submit(formDemo)', function (data) {
            var certificateUrl = $("#certificateUrl").val();
            if (certificateUrl == undefined && !certificateUrl.length > 0) {
                var certificateFile = $('#certificateFile')[0].files.length > 0 || $('.batchReportImg').length > 0;
                if (!certificateFile) {
                    layer.msg('请上传所有必需的图片！', {icon: 2});
                    return false;
                }
            }


            layer.load(1, {
                shade: [0.1, '#fff'] // 0.1透明度的白色背景
            });
            // 手动提交表单
            var formElement = document.querySelector('form');
            formElement.submit();
        });


    });

    // 图片上传功能
    $(document).ready(function () {
        $('#certificateUpload').click(function () {
            $('#certificateFile').click();
        });
        $('#certificateFile').change(function () {
            var file = this.files[0];
            if (file) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    console.log(22)
                    $(".certificateImg").remove();
                    $("#certificateImg").append('<img src="' + e.target.result + '" class="certificateImg" style="width: 100px;height: 100px;">');
                };
                reader.readAsDataURL(file);
            }
        });

    });

    // 格式化文件大小
    function formatFileSize(bytes) {
        if (bytes === 0) return '0 Bytes';
        var k = 1024;
        var sizes = ['Bytes', 'KB', 'MB', 'GB'];
        var i = Math.floor(Math.log(bytes) / Math.log(k));
        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
    }

    // 清除已选文件
    function clearFile() {
        layui.use(['jquery', 'layer'], function () {
            var $ = layui.$;
            var layer = layui.layer;
            layer.confirm('确定要移除这个文件吗？', function (index) {
                $("#filePreview").html('');
                $("#report").val('');
                $("#uploadStatus").html('已取消文件选择');
                // 清空文件输入框，确保可以重新选择相同文件
                $("#fileInput").val('');
                layer.close(index);
            });
        });
    }

    // 移除已上传的文件
    function removeUploadedFile() {
        layui.use(['jquery', 'layer'], function () {
            var $ = layui.$;
            var layer = layui.layer;
            layer.confirm('确定要移除这个文件吗？', function (index) {
                $("#filePreview").html('');
                $("#report").val('');
                $("#uploadStatus").html('已取消文件选择');
                // 清空文件输入框，确保可以重新选择相同文件
                $("#fileInput").val('');
                layer.close(index);
            });
        });
    }


    // 返回按钮点击事件
    document.getElementById("rollback").addEventListener("click", function () {
        var rollbackBtn = document.getElementById("rollback");
        if (rollbackBtn) {
            rollbackBtn.addEventListener("click", function () {
                window.history.back();
            });
        }

        // 显示已上传文件信息
        var uploadStatus = document.getElementById("uploadStatus");
        if (uploadStatus) {
            var fileName = "${fileInfo.fileName}";
            var fileSize = "${fileInfo.fileSize}";
            if (fileName && fileName !== "") {
                var sizeText = "";
                if (fileSize && fileSize !== "") {
                    var size = parseInt(fileSize);
                    if (size > 1048576) {
                        sizeText = "(" + (size / 1048576.0).toFixed(1) + "MB)";
                    } else if (size > 1024) {
                        sizeText = "(" + (size / 1024.0).toFixed(1) + "KB)";
                    } else {
                        sizeText = "(" + size + "B)";
                    }
                }
                uploadStatus.innerHTML = "已选择文件: " + fileName + " " + sizeText;
            }
        }
    });

</script>
</body>
</html>
